<template>
  <div class="index_main">
    <back-top></back-top>
    <m-header modile-title="首页" noBack="true"></m-header>
    <!--搜索部分-->
    <div class="plot-wrapper">
      <div class="search">
        <div class="search-wrapper">
          <input type="text" placeholder="请输入搜索的内容" v-model="keyword">
          <span class="search-icon"></span>
        </div>
      </div>
    </div>
    <!--图片轮播部分-->
    <div class="page-content">
      <m-swipe swipeid="swipe01" :autoplay="2000" paginationDirection="center">
        <div class="swiper-slide " slot="swiper-con"><img src="http://p1.music.126.net/Vu0T1iZRqQPaxeC8yI6krA==/109951167223719862.jpg?imageView&quality=89" alt=""></div>
        <div class="swiper-slide " slot="swiper-con"><img src="http://p1.music.126.net/5n9QezYOE7TpTiTxR-dXYQ==/109951167369945493.jpg?imageView&quality=89" alt=""></div>
        <div class="swiper-slide " slot="swiper-con"><img src="http://p1.music.126.net/HzqMNiWfGortimagJledGw==/109951167223690318.jpg?imageView&quality=89" alt=""></div>
        <div class="swiper-slide " slot="swiper-con"><img src="http://p1.music.126.net/6oL_XGtgyuLTUQEhVHBnjA==/109951167222726576.jpg?imageView&quality=89" alt=""></div>
      </m-swipe>
    </div>
    <!--广告轮播部分-->
    <!--九宫格部分-->
    <div class="nine_box">
      <ul class="clearfix">
        <li>
          <img src="./images/icon1.png" alt="">
          <p>小区公告</p>
        </li>
        <li>
          <img src="./images/icon2.png" alt="">
          <p>事物投票</p>
        </li>
        <li>
          <img src="./images/icon3.png" alt="">
          <p>选举投票</p>
        </li>
        <li @click="$router.push('/Governance/Gover')">
          <img src="./images/icon4.png" alt="">
          <p>质量透明</p>
        </li>
      </ul>
      <ul class="clearfix">
        <li>
          <img src="./images/icon5.png" alt="">
          <p>物业报修</p>
        </li>
        <li>
          <img src="./images/icon6.png" alt="">
          <p>房屋出租</p>
        </li>
        <li @click="$router.push('/Index/MultipleChoice')">
          <img src="./images/icon7.png" alt="">
          <p>意见多选</p>
        </li>
        <li @click="$router.push('/Index/StartAssess')">
          <img src="./images/icon8.png" alt="">
          <p>星级评价</p>
        </li>
      </ul>
    </div>
    <!--最新公告-->
    <div class="new_vote">
      <mt-cell style="background: #ffffff;" title="最新公告展示" is-link>
        <span style="color: #d86161;font-weight: normal">更多</span>
      </mt-cell>
      <div class="vote_list" v-for="(vote,index) in article">
        <mt-cell :title="vote.title" is-link></mt-cell>
      </div>
    </div>
    <!--最新租售-->
    <div class="new_rental">
      <mt-cell style="background: #ffffff;" title="最新租售展示" is-link>
        <span style="color: #d86161;font-weight: normal">更多</span>
      </mt-cell>
      <ul class="ren_list">
        <li v-for="(ren,index) in house">
          <div class="img_box">
            <div :style="'backgroundImage:url('+ren.img[0]+')'"></div>
          </div>
          <p>{{ren.content}}</p>
        </li>
      </ul>
    </div>
    <!--最新求助-->
    <div class="new_help">
      <mt-cell style="background: #ffffff;" title="最新求助展示" is-link>
        <span style="color: #d86161;font-weight: normal">更多</span>
      </mt-cell>
      <div class="help_list" v-for="(help,index) in neighbor">
        <mt-cell-swipe :title="help.title"></mt-cell-swipe>
      </div>
    </div>

    <!--水波纹特效框-->
    <div style="display: flex">
      <div class="wave">
        <span>待办</span>
        <div class="wave1 bg1"></div>
        <div class="wave2 bg1"></div>
        <div class="wave3 bg1"></div>
      </div>
      <div class="wave">
        <div class="wave1 bg2"></div>
        <div class="wave2 bg2"></div>
        <div class="wave3 bg2"></div>
      </div>
      <div class="wave">
        <div class="wave1 bg3"></div>
        <div class="wave2 bg3"></div>
        <div class="wave3 bg3"></div>
      </div>
    </div>

    <!--水波纹2-->
    <div class="global-page-state">
      <div class="installing">
        <div class="wave_div">待办</div>
      </div>
    </div>

    <m-footer></m-footer>
  </div>
</template>

<script>
  import mHeader from '../../components/header'
  import mSwipe from '../../components/swipe'
  import mCell from '../../components/cell'
  import {getVillageList, getConfig} from "../../api/data"
  import BackTop from "../../components/backtop/src/main";
  import mFooter from '../../components/Footer'
  import wx from 'weixin-js-sdk'

  export default {
    name: 'index',
    components: {
      BackTop,
      mHeader,
      mSwipe,
      mCell,
      mFooter
    },
    data() {
      return {
        recommendData: [],
        hotData: [],
        keyword: '',
        value: '',
        article: [],
        neighbor: [],
        house: []
      }
    },
    mounted() {
    },
    created() {
      this._getVillageList()
      this._getShare()
    },
    methods: {
      _getVillageList() {
        getVillageList().then(res => {
          if (res.code === 200) {
            // this.article = res.data
            this.article = res.data.article
            this.house = res.data.house
            this.neighbor = res.data.neighbor
          }
        })
      },
      _getShare() {
        getConfig().then(res => {
          if (res.code === 200) {
            wx.config({
              debug: false,
              appId: res.data.appId,
              nonceStr: res.data.nonceStr,
              rawString: res.data.rawString,
              signature: res.data.signature,
              timestamp: res.data.timestamp,
              jsApiList: [
                'getLocation',
                'onMenuShareTimeline',
                'onMenuShareAppMessage',
                'onMenuShareQQ',
                'onMenuShareWeibo',
                'onMenuShareQZone'
              ]
            })
            wx.ready(() => {
              setTimeout(function () {
                var params = {
                  title: 'MyNewDou', // 分享标题
                  desc: '文艺',
                  link: `../pages/Index/Index`, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                  imgUrl: 'http://img.zcool.cn/community/010bef59db1750a80121ae0c516b9b.jpg@2o.jpg', // 分享图标
                  success: function () {
                  },
                  cancel: function () {
                  }
                }
                wx.onMenuShareTimeline(params)
                wx.onMenuShareAppMessage(params)
                wx.onMenuShareQQ(params)
                wx.onMenuShareWeibo(params)
                wx.onMenuShareQZone(params)
              }, 1000)
            })
          }
        })
      }
    }
  }

</script>

<style lang="less" scoped>
  .mint-cell-text{
    font-size: 20px;
  }
  .index_main {
    padding-top: 64px;
    background: #fff;
    padding-bottom: 50%;
    /*搜索部分样式*/
    .plot-wrapper {
      width: 100%;
      .search {
        width: 100%;
        top: 40px;
        left: 0;
        background-color: #fff;
        text-align: center;
        height: 44px;
        line-height: 44px;
        .now-plot {
          padding-left: 10px;
          text-align: left;
          font-size: 15px;
          height: 40px;
          line-height: 40px;
          background-color: #D9D9D9;
        }
        .search-wrapper {
          display: inline-block;
          height: 30px;
          line-height: 30px;
          width: 92%;
          margin: 0 10px;
          border-radius: 4px;
          background-color: #e6e6e6;
          input {
            width: 150px;
            font-size: 14px;
            outline: none;
            border: none;
            background-color: #e6e6e6;
            align-items: center;
            &::-ms-input-placeholder {
              text-align: center;
            }
            &::-webkit-input-placeholder {
              text-align: center;
            }
          }
          .search-icon {
            display: inline-block;
            width: 17px;
            height: 17px;
            background-size: 17px 17px;
            vertical-align: middle;
          }
        }
      }
    }
    /*图片轮播部分样式*/
    .page-content {
      .swiper-container {
        .swiper-pagination {
          text-align: center;
        }
        img{
          height: 100%;
        }
      }
    }
    /*九宫格部分样式*/
    .nine_box {
      margin-top: 10px;
      width: 100%;
      padding-bottom: 10px;
      margin-bottom: 10px;
      border-bottom: 10px solid #f2f2f2;
      ul {
        li {
          width: 25%;
          height: auto;
          float: left;
          list-style: none;
          -moz-box-sizing: border-box;
          -webkit-box-sizing: border-box;
          box-sizing: border-box;
          text-align: center;
          img{
            width: 50px;
            height: auto;
            padding: 12px 0;
          }
          p {
            padding-top: 5px;
            font-size: 20px;
          }
        }
      }
      .clearfix:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
      }
      .clearfix {
        display: inline-block;
      }
      *html .clearfix {
        height: 1%;
      }
      .clearfix {
        display: block;
      }
    }
    /*最新公告部分样式*/
    .new_vote .new_rental .new_help {
      width: 100%;
      margin-top: 10px;
      background: #ffffff;
    }
    .ren_list{
      li{
        width: 100%;
        display: flex;
        align-items: center;
        border-bottom: 0.5px solid #ebebeb;
        margin-top: 0.5px;
        .img_box{
          display: inline-block;
          vertical-align: middle;
          height: 100px;
          width: 100px;
          padding: 5px;
          div {
            width: 100%;
            height: 100%;
            background-size: cover;
          }
        }
        p {
          margin-left: 10px;
          font-size: 15px;
        }
      }
      li:last-child {
        border-bottom: none;
      }
    }

    /*特效*/
    .wave{
      position: relative;
      border: 1px solid silver;
      width: 100px;
      height: 100px;
      border-radius: 50%;
      line-height: 50px;
      margin: 0 auto;
      font-size: 14px;
      text-align: center;
      overflow: hidden;
      animation: water-wave linear infinite;
      display: flex;
      align-items: center;
      justify-content: center;
      span{
        font-size: 25px;
        color: rgba(27, 148, 107, 1);
        position: absolute;
        z-index: 1;
      }
      .wave1{
        position: absolute;
        opacity: .7;
        width: 200%;
        height: 200%;
        animation: inherit;
        animation-duration: 5s;
        &.bg1{
          background: #2fd1ac;
          top: 40%;
          left: -25%;
          border-radius: 40%;
        }
        &.bg2{
          background: #23796E;
          top: 50%;
          left: -35px;
          border-radius: 33%;
        }
        &.bg3{
          background: rgba(46,136,166,1);
          top: 45%;
          left: -35px;
          border-radius: 33%;
        }
      }
      .wave2{
        position: absolute;
        opacity: .7;
        width: 200%;
        height: 200%;
        animation: inherit;
        animation-duration: 7s;
        &.bg1{
          background: #8be5d1;
          top: 40%;
          left: -35%;
          border-radius: 35%;
        }
        &.bg2{
          background: rgba(35,121,110,1);
          top: 40%;
          left: -35%;
          border-radius: 35%;
        }
        &.bg3{
          background: rgba(135,209,240,1);
          top: 40%;
          left: -35%;
          border-radius: 35%;
        }
      }
      .wave3{
        position: absolute;
        opacity: .3;
        width: 200%;
        height: 200%;
        animation: inherit;
        animation-duration: 11s;
        &.bg1{
          background: #cbf3ea;
          top: 50%;
          left: -35%;
          border-radius: 33%;
        }
        &.bg2{
          background: rgba(91,175,158,1);
          top: 50%;
          left: -35%;
          border-radius: 33%;
        }
        &.bg3{
          background: rgba(135,209,240,1);
          top: 40%;
          left: -35%;
          border-radius: 33%;
        }
      }
      @keyframes  water-wave{
        0% {transform: rotate(0deg);}
        100% {transform: rotate(360deg);}
      }
    }

    .global-page-state{
      .installing{
        /*position: fixed;*/
        /*right: 30px;*/
        /*bottom: 30px;*/
        width: 88px;
        height: 88px;
        color: #534D88;
        line-height: 83px;
        text-align: center;
        border-radius: 50%;
        background: #ffffff;
        .wave_div{
          position: relative;
          align-items: center;
          width: 100px;
          height: 100px;
          border-radius: 50%;
          overflow: hidden;
          background: #C9DAFF;
          box-shadow: 0 0 7px 1px #76daff;
          &:before,&:after{
            content: '';
            position: absolute;
            left: 50%;
            min-height: 600px;
            min-width: 600px;
            background: #ffffff;
            animation-name: rotate;
            animation-iteration-count: infinite;
            animation-timing-function: linear;
          }
          &:before{
            bottom: 68px;
            border-radius: 45%;
            animation-duration: 5s;
          }
          &:after{
            bottom: 64px;
            opacity: .5;
            border-radius: 47%;
            animation-duration: 6s;
          }
        }
        @keyframes rotate{
          0%{
            transform: translate(-50%,0) rotateZ(0deg);
          }
          50%{
            transform: translate(-50%,-2%) rotateZ(180deg);
          }
          100%{
            transform: translate(-50%,0) rotateZ(360deg);
          }
        }
      }
    }


  }
</style>
